<template>
  <div
    :class="[
      'message-input-toolbar',
      !isPC && 'message-input-toolbar-h5',
      isUniFrameWork && 'message-input-toolbar-uni',
    ]"
  >
    <div
      :class="[
        'message-input-toolbar-list',
        !isPC && 'message-input-toolbar-h5-list',
        isUniFrameWork && 'message-input-toolbar-uni-list',
      ]"
    >
      <EmojiPicker
        ref="emojiPickerRef"
        @insertEmoji="insertEmoji"
        @dialogShowInH5="dialogShowInH5"
        @dialogCloseInH5="dialogCloseInH5"
        @changeToolbarDisplayType="
          (type) => emits('changeToolbarDisplayType', type)
        "
        :isH5EmojiShow="isH5EmojiShow"
        @sendMessage="sendMessage"
      />
      <ImageUpload imageSourceType="album" :isH5ToolShow="isH5ToolShow"/>
      <FileUpload :isH5ToolShow="isH5ToolShow"/>
      <!-- <VideoUpload videoSourceType="album" /> -->
    </div>
    <div
      v-if="isH5"
      ref="h5Dialog"
      :class="['message-input-toolbar-h5-dialog']"
    />
  </div>
</template>
<script setup lang="ts">
import vue from '../../../adapter-vue';
import TUIChatEngine, {
  IConversationModel,
  TUIStore,
  StoreName,
} from '@tencentcloud/chat-uikit-engine';
import EmojiPicker from './emoji-picker/index.vue';
import ImageUpload from './image-upload/index.vue';
import FileUpload from './file-upload/index.vue';
import VideoUpload from './video-upload/index.vue';
import { isPC, isH5, isUniFrameWork } from '../../../utils/env';
import { ToolbarDisplayType } from '../../../interface';
const { ref, onMounted, onUnmounted, watch } = vue;

interface IProps {
  displayType: ToolbarDisplayType;
  isH5EmojiShow:boolean;
  isH5ToolShow:boolean;
}
interface IEmits {
  (e: 'scrollToLatestMessage'): void;
  (e: 'changeToolbarDisplayType', type: ToolbarDisplayType): void;
  (e: 'insertEmoji', emoji: any): void;
  (e:'sendMessage'):void;
}
const props = withDefaults(defineProps<IProps>(), {
  displayType: 'none',
  isH5EmojiShow:false,
  isH5ToolShow:false,
});

const emits = defineEmits<IEmits>();
const h5Dialog = ref<HTMLElement>();
const currentConversation = ref<IConversationModel>();
const isGroup = ref<boolean>(false);
const emojiPickerRef = ref<InstanceType<typeof EmojiPicker>>();

onMounted(() => {
  TUIStore.watch(StoreName.CONV, {
    currentConversation: onCurrentConversationUpdate,
  });
});

onUnmounted(() => {
  TUIStore.unwatch(StoreName.CONV, {
    currentConversation: onCurrentConversationUpdate,
  });
});

watch(
  () => props.displayType,
  (newValue) => {
    if (newValue === 'none') {
      emojiPickerRef.value?.closeEmojiPicker();
    } else {
      emits('scrollToLatestMessage');
    }
  },
);

watch(
  () => props.isH5EmojiShow,
  (newValue) => {
    if (newValue === false) {
      emojiPickerRef.value?.closeEmojiPicker();
    } 
  },
);

const onCurrentConversationUpdate = (conversation: IConversationModel) => {
  currentConversation.value = conversation;
  isGroup.value
    = currentConversation?.value?.type === TUIChatEngine.TYPES.CONV_GROUP;
};

const insertEmoji = (emojiObj: object) => {
  emits('insertEmoji', emojiObj);
};

const sendMessage = () =>{
  emits('sendMessage');
}

const dialogShowInH5 = (dialogDom: any) => {
  if (!isH5) {
    return;
  }
  h5Dialog.value?.appendChild && h5Dialog.value?.appendChild(dialogDom);
};

const dialogCloseInH5 = (dialogDom: any) => {
  if (!isH5) {
    return;
  }
  if (dialogDom) {
    h5Dialog.value?.removeChild && h5Dialog.value?.removeChild(dialogDom);
  }
};
</script>
<style lang="scss" scoped>
@import "../style/common";

.message-input-toolbar {
  border-top: 1px solid #f4f5f9;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;

  &-list {
    display: flex;
    flex-direction: row;
    align-items: center;

    .extension-list {
      list-style: none;
      display: flex;

      &-item {
        width: 20px;
        height: 20px;
        padding: 12px 10px 1px;
        cursor: pointer;
      }
    }
  }
}

.message-input-toolbar-h5 {
  padding: 5px 10px;
  box-sizing: border-box;
  flex-direction: column;
}

.message-input-toolbar-uni {
  background-color: #ebf0f6;
  flex-direction: column;

  &-list {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: repeat(2, 100px);
  }
}
</style>
